<!--
  description: components
  @author: GuoSiYue
  date: 2021-11-11
 -->

<template>
    <!-- 多个组件的过渡 -->
    <div>
        <transition name="component-fade" mode="out-in">
            <component v-bind:is="view"></component>
        </transition>
    </div>
</template>

<script>
    export default {
        name: "components",
        data() {
            return {
                view: 'v-a'
            }
        },
        components: {
            'v-a': {
                template: '<div>Component A</div>'
            },
            'v-b': {
                template: '<div>Component B</div>'
            }
        }
    }
</script>

<style scoped>
    .component-fade-enter-active, .component-fade-leave-active {
        transition: opacity .3s ease;
    }
    .component-fade-enter, .component-fade-leave-to {
        opacity: 0;
    }
</style>